<template>
  <div v-if="isShow" class="loading-wrapper__content">
    <div class="loading">
      <span style="color: #fff">...loading...</span>
    </div>
  </div>
</template>

<script setup lang="ts">
const isShow = ref(false); //定位loading 的开关

const show = () => {
  isShow.value = true;
};
const hide = () => {
  isShow.value = false;
};
//对外暴露 当前组件的属性和方法
defineExpose({
  isShow,
  show,
  hide,
});
</script>

<style scoped lang="scss">
.loading-wrapper__content {
  position: fixed;
  -webkit-transform: translateY(-0%) translateX(-0%);
  transform: translateY(-0%) translateX(-0%);
  z-index: 100;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading {
  width: 200px;
  height: 200px;
  box-sizing: border-box;
  border-radius: 50%;
  border-top: 10px solid #ee5a24;
  animation: a1 2s linear infinite;
}

.loading::before,
.loading::after {
  /*伪元素一定要与content一起使用。::brfore表示在loading前面加东西，::after表示在元素后面加内容。content就是内容*/
  content: "";
  width: 200px;
  height: 200px;
  /* background: red; */
  position: absolute;
  left: 0;
  top: -10px;
  box-sizing: border-box;
  border-radius: 50%;
}

.loading::before {
  border-top: 10px solid #e67e22;
  transform: rotate(120deg);
}

.loading::after {
  border-top: 10px solid #009432;
  transform: rotate(240deg);
}

.loading span {
  position: absolute;
  width: 200px;
  height: 200px;
  text-align: center;
  line-height: 200px;
  animation: a2 2s linear infinite;
}

@keyframes a1 {
  to {
    transform: rotate(360deg);
  }
}

@keyframes a2 {
  to {
    transform: rotate(-360deg);
  }
}
</style>
